<template>
  <view class="orderDetail_outer">
    <view class="orderDetail_header">
      <u-navbar @rightClick="rightClick" :autoBack="true" height="152rpx" bgColor="#FFFAEF" :fixed="true" :border="true"
        :placeholder="true">
        <view slot="left" class="orderDetail_header_back">
          <image src="@/static/record/goback.png"></image>
        </view>
        <view slot="center" class="orderDetail_header_title">订单详情</view>
      </u-navbar>
    </view>
    <view class="orderDetail_content">
      <view class="orderDetail_content_title">
        <text v-if="orderDetail.exchangeType == 1">云豆 换 钻石 </text>
        <text v-if="orderDetail.exchangeType == 2">钻石 换 云豆</text>
      </view>
      <view class="orderDetail_content_inner">
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>总交换</text></view>
          <view class="orderDetail_content_inner_row_right">
            <text v-if="orderDetail.exchangeType == 2">{{ orderDetail.consumed }} 钻石</text>
            <text v-if="orderDetail.exchangeType == 1">{{ orderDetail.consumed }} 云豆</text>
            <image src="@/static/orderDetail/diamond.png" v-if="orderDetail.exchangeType == 2"></image>
            <image src="@/static/orderDetail/bean.png" v-if="orderDetail.exchangeType == 1"></image>
          </view>
        </view>
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>成功交换</text>
            <image src="@/static/orderDetail/gou.png"></image>
          </view>
          <view class="orderDetail_content_inner_row_right">
            <text v-if="orderDetail.exchangeType == 2">{{ orderDetail.realConsumed }} 钻石</text>
            <text v-if="orderDetail.exchangeType == 1">{{ orderDetail.realConsumed }} 云豆</text>
            <image src="@/static/orderDetail/diamond.png" v-if="orderDetail.exchangeType == 1"></image>
            <image src="@/static/orderDetail/bean.png" v-if="orderDetail.exchangeType == 2"></image>
          </view>
        </view>
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>交换失败</text>
            <image src="@/static/orderDetail/cha.png"></image>
          </view>
          <view class="orderDetail_content_inner_row_right">
            <text v-if="orderDetail.exchangeType == 2">{{ orderDetail.consumed - orderDetail.realConsumed }} 钻石</text>
            <text v-if="orderDetail.exchangeType == 1">{{ orderDetail.consumed - orderDetail.realConsumed }} 云豆</text>
            <image src="@/static/orderDetail/diamond.png" v-if="orderDetail.exchangeType == 2"></image>
            <image src="@/static/orderDetail/bean.png" v-if="orderDetail.exchangeType == 1"></image>
          </view>
        </view>
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>实际获得数量</text></view>
          <view class="orderDetail_content_inner_row_right">
            <text v-if="orderDetail.exchangeType == 1">{{ (Math.floor(orderDetail.obtained) / 1000).toFixed(3) }} K钻石</text>
            <text v-if="orderDetail.exchangeType == 2">{{ orderDetail.obtained }} 云豆</text>
            <image src="@/static/orderDetail/diamond.png" v-if="orderDetail.exchangeType == 1"></image>
            <image src="@/static/orderDetail/bean.png" v-if="orderDetail.exchangeType == 2"></image>
          </view>
        </view>
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>手续费</text></view>
          <view class="orderDetail_content_inner_row_right">
            <text v-if="orderDetail.exchangeType == 2">{{ orderDetail.fee }} 钻石</text>
            <text v-if="orderDetail.exchangeType == 1">{{ orderDetail.fee }} 云豆</text>
            <image src="@/static/orderDetail/diamond.png" v-if="orderDetail.exchangeType == 2"></image>
            <image src="@/static/orderDetail/bean.png" v-if="orderDetail.exchangeType == 1"></image>
          </view>
        </view>
        <view class="orderDetail_content_inner_row" style="margin-top: 60rpx;">
          <view class="orderDetail_content_inner_row_left"><text>订单号</text></view>
          <view class="orderDetail_content_inner_row_right"><text>{{ orderDetail.orderNo ? orderDetail.orderNo : '---'
          }}</text></view>
        </view>
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>兑换比例</text></view>
          <view v-if="orderDetail.exchangeType == 1" class="orderDetail_content_inner_row_right">
            <text>1云豆≈{{ (Math.floor(orderDetail.exchangeRate) / 1000).toFixed(3) }}钻石</text>
          </view>
          <view v-if="orderDetail.exchangeType == 2" class="orderDetail_content_inner_row_right"><text>1钻石≈{{
            orderDetail.exchangeRate * 1 }}云豆</text></view>
        </view>
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>兑换时间</text></view>
          <view class="orderDetail_content_inner_row_right"><text>{{ orderDetail.createdAt }}</text></view>
        </view>
        <view class="orderDetail_content_inner_row">
          <view class="orderDetail_content_inner_row_left"><text>完成时间</text></view>
          <view class="orderDetail_content_inner_row_right"><text>{{
            orderDetail.completedAt ? orderDetail.completedAt : "---"
          }}</text></view>
        </view>
        <!-- 
        <view class="orderDetail_content_inner_left">
          <view><text>总交换</text></view>
          <view
            ><text>成功交换</text
            ><image src="@/static/orderDetail/gou.png"></image
          ></view>
          <view
            ><text>交换失败</text
            ><image src="@/static/orderDetail/cha.png"></image
          ></view>
          <view><text>实际获得数量</text></view>
          <view><text>手续费</text></view>
          <view class="segmentation"><text>订单号</text></view>
          <view><text>兑换比例</text></view>
          <view><text>兑换时间</text></view>
          <view><text>完成时间</text></view>
        </view>
        <view class="orderDetail_content_inner_right">
          <view class="orderDetail_content_inner_right_top">
            <view>
              <text v-if="orderDetail.exchangeType == 2"
                >{{ orderDetail.consumed }} 钻石</text
              >
              <text v-if="orderDetail.exchangeType == 1"
                >{{ orderDetail.consumed }} 云豆</text
              >
              <image
                src="@/static/orderDetail/diamond.png"
                v-if="orderDetail.exchangeType == 2"
              ></image>
              <image
                src="@/static/orderDetail/bean.png"
                v-if="orderDetail.exchangeType == 1"
              ></image>
            </view>
            <view>
              <text v-if="orderDetail.exchangeType == 2"
                >{{ orderDetail.realConsumed }} 钻石</text
              >
              <text v-if="orderDetail.exchangeType == 1"
                >{{ orderDetail.realConsumed }} 云豆</text
              >
              <image
                src="@/static/orderDetail/diamond.png"
                v-if="orderDetail.exchangeType == 1"
              ></image>
              <image
                src="@/static/orderDetail/bean.png"
                v-if="orderDetail.exchangeType == 2"
              ></image>
            </view>
            <view>
              <text v-if="orderDetail.exchangeType == 2">{{ orderDetail.consumed-orderDetail.realConsumed }} 钻石</text>
              <text v-if="orderDetail.exchangeType == 1">{{ orderDetail.consumed-orderDetail.realConsumed }} 云豆</text>
              <image
                src="@/static/orderDetail/diamond.png"
                v-if="orderDetail.exchangeType == 2"
              ></image>
              <image
                src="@/static/orderDetail/bean.png"
                v-if="orderDetail.exchangeType == 1"
              ></image>
            </view>
            <view>
              <text v-if="orderDetail.exchangeType == 1"
                >{{ orderDetail.obtained }} 钻石</text
              >
              <text v-if="orderDetail.exchangeType == 2"
                >{{ orderDetail.obtained }} 云豆</text
              >
              <image
                src="@/static/orderDetail/diamond.png"
                v-if="orderDetail.exchangeType == 1"
              ></image>
              <image
                src="@/static/orderDetail/bean.png"
                v-if="orderDetail.exchangeType == 2"
              ></image>
            </view>
            <view>
              <text v-if="orderDetail.exchangeType == 2"
                >{{ orderDetail.fee }} 钻石</text
              >
              <text v-if="orderDetail.exchangeType == 1"
                >{{ orderDetail.fee }} 云豆</text
              >
              <image
                src="@/static/orderDetail/diamond.png"
                v-if="orderDetail.exchangeType == 2"
              ></image>
              <image
                src="@/static/orderDetail/bean.png"
                v-if="orderDetail.exchangeType == 1"
              ></image>
            </view>
          </view>
          <view class="orderDetail_content_inner_right_down">
            <view
              ><text>{{ orderDetail.orderNo?orderDetail.orderNo:'---' }}</text></view
            >
            <view v-if="orderDetail.exchangeType == 1"
              ><text>1云豆≈{{ orderDetail.exchangeRate }}钻石</text></view
            >
            <view v-if="orderDetail.exchangeType == 2"
              ><text>1钻石≈{{ orderDetail.exchangeRate * 1 }}云豆</text></view
            >
            <view
              ><text>{{ orderDetail.createdAt }}</text></view
            >
            <view
              ><text>{{
                orderDetail.completedAt ? orderDetail.completedAt : "---"
              }}</text></view
            >
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  onLoad() {
    console.log(this.orderDetail);
  },
  computed: {
    ...mapState(["orderDetail"]),
  },
};
</script>

<style lang="scss" scoped>
.orderDetail_outer {
  width: 100vw;
  min-height: 100vh;
  background: #fffaef;

  .orderDetail_header {
    border-bottom: 2rpx solid rgba(183, 178, 169, 0.35);

    .orderDetail_header_title {
      font-size: 46rpx;
      font-family: DreamHanSansSC;
      font-weight: 600;
      color: #302b26;
    }

    .orderDetail_header_back {
      width: 46rpx;
      height: 46rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .orderDetail_content {
    .orderDetail_content_title {
      margin-left: 44rpx;
      margin-top: 40rpx;

      text {
        font-size: 28rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #37322c;
      }
    }

    .orderDetail_content_inner {
      display: flex;
      flex-direction: column;
      margin-top: 68rpx;

      .orderDetail_content_inner_row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 22rpx;

        .orderDetail_content_inner_row_left {
          margin-left: 44rpx;

          text {
            font-size: 25rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #6c6862;
          }
        }

        .orderDetail_content_inner_row_right {
          margin-right: 44rpx;

          text {
            font-size: 28rpx;
            font-family: DreamHanSansSC;
            font-weight: 600;
            color: #37322c;
          }
        }

        image {
          width: 36rpx;
          height: 36rpx;
        }
      }

      .orderDetail_content_inner_left {
        display: flex;
        flex-direction: column;
        margin-left: 44rpx;
        row-gap: 40rpx;

        view {
          display: flex;
          align-items: center;
        }

        image {
          width: 36rpx;
          height: 36rpx;
        }

        text {
          font-size: 25rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #6c6862;
        }
      }

      .orderDetail_content_inner_right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 48rpx;

        text {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #37322c;
        }

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .orderDetail_content_inner_right_top {
        display: flex;
        flex-direction: column;
        row-gap: 30rpx;
        align-items: flex-end;
      }

      .orderDetail_content_inner_right_down {
        margin-top: 34rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        row-gap: 30rpx;
      }
    }
  }
}
</style>
